@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

.guided-tour__popover {
	z-index: 9999999;

	.popover__inner {
		display: flex;
		gap: 16px;
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 8px;
	}
}

.guided-tour__popover-heading {
	color: var( --color-neutral-100 );
	@include heading-medium;
}

.guided-tour__popover-description {
	color: var( --color-neutral-80 );
	@include body-small;
	max-width: 220px;
	text-align: left;
	margin-block-end: 0;
}

.guided-tour__popover-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	.guided-tour__popover-step-count {
		color: var( --color-neutral-60 );
		@include body-small;
	}

	.guided-tour__popover-footer-right-content {
		display: flex;
		gap: 8px;

		button {
			padding: 4px 8px;
			@include body-small;
		}
	}
}
